import React, { useState } from 'react';
import sty from './navBar.less';
import Login from '../login/Login';

export default (props) => {
  let { handelNavChange, navList, activeIndex } = props;

  let navlistContent = navList.map((item, index) => {
    let className =
      index === activeIndex
        ? `${sty['list-item']} click ${sty['active']}`
        : sty['list-item'] + ' click';
    return (
      <div
        className={className}
        key={index}
        onClick={() => {
          handelNavChange(item, index);
        }}
      >
        {item.name}
      </div>
    );
  });
  const [isShow, setisShow] = useState(true);

  let handleLoginClick = () => {
    setisShow(!isShow);
  };

  return (
    <header className={sty['nav-bar']}>
      <div className={sty['content']}>
        <div className={sty['log-box']}>
          <div className={sty.img}></div>
          网抑云音乐
        </div>
        <div className={sty['nav-list']}>{navlistContent}</div>
        <div className={sty['right-box']}>
          {/* 搜索框 */}
          <div className={sty['search-box']}>
            <input type="input" placeholder="搜索框" />
            <i className="iconfont icon-sousuo click"></i>
          </div>
          {/* 创作者中心 */}
          <div className={sty['create-box']}>创作者中心</div>
          {/* 用户信息  */}
          <div className={sty['user']}>
            <div className={sty['login-bar']} onClick={handleLoginClick}>
              登录
            </div>
          </div>
        </div>
      </div>
      <Login isShow={isShow} handleLoginClick={handleLoginClick}></Login>
    </header>
  );
};
